//@ts-nocheck
import React,{Component,createContext} from '../../react'
import ReactDOM from '../../react-dom';

class Todos extends React.Component {
  constructor(props) {
    super(props);
    this.state = {list: [], text: ''};
  }

  add = () => {
    if (this.state.text && this.state.text.length > 0) {
      this.setState({list: [...this.state.list, this.state.text]});
    }
  };
  onChange = (event) => {
    this.setState({text: event.target.value});
  };
  onDel = (index) => {
    this.state.list.splice(index, 1);
    this.setState({list: this.state.list});
  };

  render() {
    const createItem = (itemText, index) => {
      return React.createElement('li', {}, itemText, React.createElement('button',
        {onClick: () => this.onDel(index)}, 'X'));
    };
    const lists = this.state.list.map(createItem);
    const ul = React.createElement('ul', {}, ...lists);
    const input = React.createElement('input', {onKeyup: this.onChange, value: this.state.text});
    const button = React.createElement('button', {onClick: this.add}, 'Add')
    return React.createElement('div', {}, input, button, ul);
  }
}
const element = React.createElement(Todos, {});
ReactDOM.render(
  element,
  document.getElementById('root')
);
